<template>
  <div class="flex items-center">
    <div class="flex justify-start items-center">
      <span class="text-white text-nowrap" v-if="hasLogin">{{
        "你好 , " + name
      }}</span>
      <el-tooltip
        v-if="props.showVision"
        popper-class="my-tooltip select-none"
        :content="version"
        raw-content
      >
        <img
          class="w-[40px] ml-[10px]"
          src="@renderer/assets/images/version.png"
        />
      </el-tooltip>
      <el-dropdown v-if="hasLogin">
        <img
          class="w-[40px] ml-[10px]"
          src="@renderer/assets/images/user_true.png"
        />
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="$emit('loginOut')"
              >退出登录</el-dropdown-item
            >
          </el-dropdown-menu>
        </template>
      </el-dropdown>

      <el-tooltip
        v-else
        popper-class="my-tooltip cursor-pointer"
        content="点击登录"
        raw-content
        @click="handLogin"
      >
        <img
          @click="handLogin"
          class="w-[40px] ml-[10px] cursor-pointer"
          src="@renderer/assets/images/user.png"
        />
      </el-tooltip>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, computed } from "vue";
import { useUserStore } from "@renderer/store/modules/user";

import { getRequestUrl } from "@renderer/utils/other";
const userStore = useUserStore();

let props = defineProps({
  showVision: {
    type: Boolean,
    default: true,
  },
});
let version = ref("");
onMounted(async () => {
  version.value = await getRequestUrl("VERSION");
});
const name = computed(() => {
  return userStore.userInfo.personName || userStore.userInfo.userName;
});

const hasLogin = computed(() => {
  return userStore.ifLogin;
});
let emit = defineEmits(["login", "loginOut"]);

const handLogin = () => {
  emit("login");
};
</script>

<style lang="scss">
.my-tooltip {
  background: #0e04044f !important;
}

.my-tooltip.el-tooltip__popper[x-placement^="top"] .popper__arrow {
  border-top-color: #fff;
  color: #000;
  box-shadow: 0 0px 0px 0 rgba(71, 46, 46, 0.1);
}
.my-tooltip {
  background: #16151549 !important;
  color: rgb(236, 226, 226) !important;
  line-height: 1.5;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1) !important;
}
</style>
